import React from "react";
import { useState, useEffect } from "react";
import { getUserByPointsRank } from "@/api/issue";
import ScoreItem from "./ScoreItem";
import { Card } from "antd";
export default function ScoreRank() {
  const [userRankInfo, setUserRankInfo] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const { data } = await getUserByPointsRank();
      setUserRankInfo(data);
    }
    fetchData();
  }, []);

  return (
    <div>
      <Card title="积分排行榜">
        <div className="rankContainer">
          {userRankInfo?.map((item, index) => (
            <ScoreItem rankInfo={item} rank={index + 1} key={item._id} />
          ))}
        </div>
      </Card>
    </div>
  );
}
